<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程详情</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css
    ">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/videoDetail.css">
</head>

<body>
    <!-- 导航菜单 -->
    <nav>
        <div class="main">
            <img src="../img/public/logo.png" alt="" class="logo">
            <ul>
                <li><a href="../index.html">首页</a></li>
                <li class="check"><a href="./online.html">同步课程</a></li>
                <li><a href="../index.html#jing">精品课程</a></li>
            </ul>
            <div class="search">
                <div class="left">课程<i class="iconfont icon-down"></i>
                </div>
                <input type="text" placeholder="搜索感兴趣的内容" id="keyWord">
                <img src="../img/public/search.png" alt="" id="searchByKeyword">
            </div>
            <div class="login" id="login">
                <a href="../pages/loginAndRegister/login.html">登陆</a> /
                <a href="../pages/loginAndRegister/register.html">注册</a>
            </div>
            <div class="user" id="user_list" style="display: inline-block !important">
                <img src="../img/login/user.png" alt="" id="userimg">
                <div class="userlist" id="ulist">
                    <ul id="userlist">
                        <li>我是用户名</li>
                        <li id="coursesCenter">课程中心</li>
                        <li>订单中心</li>
                        <li>资金管理</li>
                        <li class="person">个人中心</li>
                        <li class="out">退出登陆</li>
                    </ul>
                </div>
            </div>
            <!-- <div class="login">
                <a href="javascript:;">登陆</a> /
                <a href="javascript:;">注册</a>
            </div>
            <div class="user">
                <img src="../img/login/user.png" alt="">
                <div class="userlist">
                    <ul>
                        <li>我是用户名</li>
                        <li>课程中心</li>
                        <li>订单中心</li>
                        <li>资金管理</li>
                        <li>个人中心</li>
                        <li class="out">退出登陆</li>
                    </ul>
                </div>
            </div> -->
        </div>
    </nav>
    <div class="all">
        <div class="crumbs">
            <span>首页</span>
            <span>></span>
            <span>同步课堂</span>
            <span>></span>
            <span>视频详情</span>
        </div>
    </div>
    <!-- 主体内容 -->
    <main>
        <div class="classDetail" id="courseContainer">
            <div class="left">
                <!-- <img src="../img/videoDetail/san.png" alt="" id="_img_src"> -->
                <img src="" alt="" id="_img_src">
            </div>
            <div class="right">
                <!-- <p class="title">[2019年秋季] 初三数学班</p>
                <ul>
                    <li>年级科目：初三数学</li>
                    <li>地区：北京</li>
                    <li>开课时间：09月30日—12月20日</li>
                    <li class="price">
                        <span>¥199</span>
                        <span>报名学习</span>
                    </li>
                </ul> -->
            </div>
        </div>
        <div class="row introduce">
            <!-- <p>授课师资</p>
            <div class="left">
                <p class="img">
                    <img src="" alt="">
                </p>
                <p class="right">
                    <span>李晓明</span>
                    <span>小U课堂高级讲师</span>
                </p>
            </div>
            <div class="right">
                多年IT行业从业经验，精通常用的Web开发技术;熟悉主流的CMS、商城、论坛 等PHP开源产品，具有丰富的建站及二次开发经验，多个大型ERP系统的开发实践经验;精通常用的PHP开发框架，对服务器架构及服务器日常运维等方面有一 定的研究。
            </div> -->
        </div>
        <div class="row title">
            <span class="active" id="mulu">课程目录</span><span id="xiangqing">课程详情</span>
        </div>
        <div class="classlist active" id="kechengmulu">
            <div class="content">
                <div class="detail">
                    <ul class="active" id="videoContainer">
                        <!-- <li>
                            <p>
                                <i class="iconfont icon-bofang"></i>
                                <span>第3节：钠及其化合物</span>
                            </p>
                            <p>2020.12.10 20：00开播</p>
                        </li> -->

                    </ul>
                </div>
            </div>
            <div class="bottom">
            </div>
        </div>
        <div class="classlist" id="kechengxiangqing">
            <img src="" alt="">
        </div>
    </main>

    <footer>
        <div class="cont">
            <div class="main">
                <p>
                    首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 | 营业执照 | 教师资格证公示

                </p>
                <p>
                    京ICP备 13030888号 Copyright © 2014-2019 行者信息科技（北京）有限公司 | 地址：北京市新华区马当路388号C座 | 电话：010-66666666 | 京公网安备 01010102002533号
                </p>
                <p>
                    京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 | 食品经营 许可证：JY13101140088888
                </p>
                <p>医疗器械经营许可证：京嘉食药监械经营许20188008号 | 互联网药品信息服务资格证书：(京)-经营性-2018-0011 |</p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="../utils/http.js"></script>

    <script>
        let mid = localStorage.getItem('mid')
            //获取用户头像信息
        async function getUserIcon() {
            let {
                err,
                result
            } = await myAjax({
                url: '/api/user',
                data: {
                    mid
                }
            })
            console.log(result.result.head_photo_url);

            let userInfo = result.result
                //头像赋值
            $('#userimg').attr('src', userInfo.head_photo_url);
        }
        getUserIcon();

        // 登录后隐藏登录注册样式 显示用户头像的样式
        let isLogin = localStorage.getItem('token');
        console.log(isLogin);

        if (!isLogin) { //未登录状态 显示登录注册按钮
            $('#login a').css('display', 'inline-block');
            $('#userimg').css('display', 'none');
        } else { //登录状态  显示头像
            $('#login').css('display', 'none');
            $('#userimg').css('display', 'inline-block');
        }
        // 退出登录的方法
        $('.out').on('click', function() {
            localStorage.removeItem('mid');
            localStorage.removeItem('token');
            location.reload();
            location.href = './loginAndRegister/login.html';
        });

        //跳转到个人中心
        $('.person').on('click', function() {
            location.href = 'userSeting.html';
        });

        //跳转到课程中心
        $('#coursesCenter').on('click', function() {
            location.href = 'course.html';
        });

        //跳转到搜索页
        $('#searchByKeyword').on('click', function() {
            // alert('ok')
            let keyword = $('#keyWord').val()
            if (keyword == '') {
                alert('请输入关键字进行搜索')
                return
            }
            location.href = 'search_list.html?keyword=' + keyword
        })




        //先获取一个固定的课程 比如 id:1beec178-4b02-40fb-9d1c-8aa61cd4a097
        //71f07c0d-f04f-4cb2-a558-7fbf2586f912
        function qsToJson(query) {
            let obj = {}
            let s1 = query.substring(1)
            let arr1 = s1.split('&') //[ 'a=11','b=22','c=33' ]
                // console.log(arr1)
            arr1.forEach(value => {
                let arr2 = value.split('=')
                obj[arr2[0]] = decodeURIComponent(arr2[1])
                    //obj[arr2[0]] = arr2[1]
            })
            return obj
        }
        let {
            id
        } = qsToJson(location.search)
            // id = '1beec178-4b02-40fb-9d1c-8aa61cd4a097'
        async function getCourseDetailByID(id) {
            let {
                err,
                result
            } = await myAjax({
                url: '/api/course',
                data: {
                    id
                }
            })
            let {
                course,
                teacher,
                videos
            } = result.result



            // console.log(course, teacher, videos)
            //2. 拼接字符串 并渲染
            //2.1 课程信息
            let courseStr = `
         <div class="left">
                <img src="${course.image_src}" alt="">
            </div>
            <div class="right">
                <p class="title">${course.title}</p>
                <ul>
                    <li>年级科目：${course.grade_name}${course.subject_name}</li>
                    <li>地区：${course.area_name}</li>
                    <li>开课时间：${course.intro}</li>
                    <li class="price">
                        <span>¥${course.price}</span>
                        <span onclick="doStudy()">报名学习</span>
                    </li>
                </ul>
            </div>
        `
            $('#courseContainer').html(courseStr);

            //课程详情图片
            $('#kechengxiangqing>img').attr('src', course.detail_imgs);
            $('#kechengxiangqing>img').css('display', 'none');

            //2.2 授课老师信息拼接
            console.log(teacher);
            // let teacher = result.result.teacher;
            let str2 = `
                <p>授课师资</p>
                <div class="left">
                    <p class="img">
                        <img src="${teacher.head_photo_url}" alt="">
                    </p>
                    <p class="right">
                        <span>${teacher.realname}</span>
                        <span>小U课堂高级讲师</span>
                    </p>
                </div>
                <div class="right">
                    ${teacher.intro}
                </div>
                `;
            $('.introduce').html(str2);

            console.log(course);
            // console.log(videos);

            //2.3 视频拼接
            let videoStr = ''
            videos.forEach(item => {
                    videoStr += `
                        <li>
                            <a href="./videoPlay.html?id=${course.cid}">
                            <p>
                                <i class="iconfont icon-bofang"></i>
                                <span>第${item.vnum}节：${item.video_title}</span>
                            </p>
                            <p>开播</p>
                            </a>
                        </li>
                                `
                })
                // console.log( videoStr )
            $('#videoContainer').html(videoStr);
        }

        getCourseDetailByID(id);


        //报名
        async function doStudy() {
            let cid = id
            let mid = localStorage.getItem('mid') //这个是个用户的唯一标识
                // let mid = 'm1111';

            let {
                err,
                result
            } = await myAjax({
                url: '/api/study',
                method: 'post', //此时这个接口为post请求
                data: {
                    cid,
                    mid
                }
            })
            if (result.status == 200) {
                alert('报名成功')
                return
            }
            alert(result.msg)
        }



        //点击选项卡切换
        $('#xiangqing').on('click', function() {
            $('#mulu').removeClass('active');
            $('#xiangqing').addClass('active');
            $('#kechengxiangqing>img').css('display', 'block');
            $('#videoContainer').removeClass('active');
            $('#kechengmulu').removeClass('active');
            $('#kechengxiangqing').addClass('active');
            // $('#videoContainer').css('display', 'block');
        });

        $('#mulu').on('click', function() {
            $('#mulu').addClass('active');
            $('#xiangqing').removeClass('active');
            $('#kechengxiangqing>img').css('display', 'none');
            $('#videoContainer').addClass('active');
            $('#kechengmulu').addClass('active');
            $('#kechengxiangqing').removeClass('active');
        });
    </script>
    <script src="../js/ujiuye.js"></script>
</body>

</html>